<template>
	<view class="con">
		<!-- <view class="nav">
			<view class="status_bar">
			</view>
			<view class="navtitle">
				<u-icon name="arrow-left" color="#b5b5b5" size="36" @click="back"></u-icon>
				<input type="text" value="" placeholder="搜索订单" class="input" />
			</view>
		</view> -->
		<view class="nav_title">
			<view class="t_t" :class="{'active':current==0}" @click="change(0)">待付款</view>
			<view class="t_t" :class="{'active':current==1}" @click="change(1)">待发货</view>
			<view class="t_t" :class="{'active':current==2}" @click="change(2)">待收货</view>
			<view class="t_t" :class="{'active':current==3}" @click="change(3)">待评价</view>
			<view class="t_t" :class="{'active':current==4}" @click="change(4)">已完成</view>
		</view>
		<swiper @change="changeindex" :current="current">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y="true" class="swiper-item scroll-view" @scrolltolower="getlist">
					<view class="orderitem" v-for="(item,index) in list0" :key="index"  >
						<view class="titie">
							<view class="dpname">{{item.shopName}}</view>
							<view class="zt">待付款</view>
						</view>
						<view class="goodsitem" v-for="(it,i) in item.orderGoodsList" @click="top(it.goodsId)">
							<view class="gimg">
								<image :src="it.imageUrl" mode="aspectFill"></image>
							</view>
							<view class="g_t_b">
								<view class="g_nam">{{it.goodsName}}</view>
								<view class="g_pz">规格：{{it.goodsAttr | text}}</view>
							</view>
							<view class="g_p">
								<view v-if="it.totalPrice!=0&&it.totalIntegral==0" class="g_price">￥{{it.totalPrice}}
								</view>
								<view v-if="it.totalPrice==0&&it.totalIntegral!=0" class="g_price">
									{{it.totalIntegral}}积分</view>
								<view v-if="it.totalPrice!=0&&it.totalIntegral!=0" class="g_price">￥{{it.totalPrice}}
								</view>
								<view v-if="it.totalPrice!=0&&it.totalIntegral!=0" class="g_price">
									{{it.totalIntegral}}积分</view>
								<view class="g_num">x{{it.totalNum}}</view>
							</view>
						</view>
						<view class="t_price">
							<text v-if="item.totalPrice!=0&&item.totalIntegral==0">实付款￥{{item.totalPrice}}</text>
							<text v-if="item.totalPrice==0&&item.totalIntegral!=0">实付款{{item.totalIntegral}}积分</text>
							<text
								v-if="item.totalPrice!=0&&item.totalIntegral!=0">实付款￥{{item.totalPrice}}+{{item.totalIntegral}}积分</text>
						</view>
						<view class="btnbox">
							<view class="btn" @click="cancel(item.orderId)">取消订单</view>
							<view class="btn" @click="orderinfo(item.orderId)">订单详情</view>
							<view class="btn">帮我付</view>
							<view class="btn" @click="topay(item.orderId)">立即付款</view>
						</view>
					</view>
					<view class="noimgbox" v-if="list0.length==0">
						<image src="../../static/noimg/nonews.png" class="noimg"></image>
					</view>
					<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-else/>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y="true" class="swiper-item scroll-view" @scrolltolower="getlist">
					<view class="orderitem" v-for="(item,index) in list1" :key="index">
						<view class="titie">
							<view class="dpname">{{item.shopName}}</view>
							<view class="zt">待发货</view>
						</view>
						<view class="goodsitem" v-for="(it,i) in item.orderGoodsList" @click="top(it.goodsId)">
							<view class="gimg">
								<image :src="it.imageUrl" mode="aspectFill"></image>
							</view>
							<view class="g_t_b">
								<view class="g_nam">{{it.goodsName}}</view>
								<view class="g_pz">规格：{{it.goodsAttr | text}}</view>
							</view>
							<view class="g_p">
								<view v-if="it.totalPrice!=0&&it.totalIntegral==0" class="g_price">￥{{it.totalPrice}}
								</view>
								<view v-if="it.totalPrice==0&&it.totalIntegral!=0" class="g_price">
									{{it.totalIntegral}}积分</view>
								<view v-if="it.totalPrice!=0&&it.totalIntegral!=0" class="g_price">￥{{it.totalPrice}}
								</view>
								<view v-if="it.totalPrice!=0&&it.totalIntegral!=0" class="g_price">
									{{it.totalIntegral}}积分</view>
								<view class="g_num">x{{it.totalNum}}</view>
							</view>
						</view>
						<view class="t_price">
							<text v-if="item.totalPrice!=0&&item.totalIntegral==0">实付款￥{{item.totalPrice}}</text>
							<text v-if="item.totalPrice==0&&item.totalIntegral!=0">实付款{{item.totalIntegral}}积分</text>
							<text
								v-if="item.totalPrice!=0&&item.totalIntegral!=0">实付款￥{{item.totalPrice}}+{{item.totalIntegral}}积分</text>
						</view>
						<view class="btnbox">
							<view class="btn" @click="cancel(item.orderId)">取消订单</view>
							<view class="btn" @click="orderinfo(item.orderId)">订单详情</view>
							<!-- <view class="btn">帮我付</view> -->
							<!-- <view class="btn">立即付款</view> -->
						</view>
					</view>
					<view class="noimgbox" v-if="list1.length==0">
						<image src="../../static/noimg/nonews.png" class="noimg"></image>
					</view>
					<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-else/>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y="true" class="swiper-item scroll-view" @scrolltolower="getlist">
					<view class="orderitem" v-for="(item,index) in list2" :key="index">
						<view class="titie">
							<view class="dpname">{{item.shopName}}</view>
							<view class="zt">单号:{{item.expressNo}}</view>
						</view>
						<view class="goodsitem" v-for="(it,i) in item.orderGoodsList" @click="top(it.goodsId)">
							<view class="gimg">
								<image :src="it.imageUrl" mode="aspectFill"></image>
							</view>
							<view class="g_t_b">
								<view class="g_nam">{{it.goodsName}}</view>
								<view class="g_pz">规格：{{it.goodsAttr | text}}</view>
							</view>
							<view class="g_p">
								<view v-if="it.totalPrice!=0&&it.totalIntegral==0" class="g_price">￥{{it.totalPrice}}
								</view>
								<view v-if="it.totalPrice==0&&it.totalIntegral!=0" class="g_price">
									{{it.totalIntegral}}积分</view>
								<view v-if="it.totalPrice!=0&&it.totalIntegral!=0" class="g_price">￥{{it.totalPrice}}
								</view>
								<view v-if="it.totalPrice!=0&&it.totalIntegral!=0" class="g_price">
									{{it.totalIntegral}}积分</view>
								<view class="g_num">x{{it.totalNum}}</view>
							</view>
						</view>
						<view class="t_price">
							<text v-if="item.totalPrice!=0&&item.totalIntegral==0">实付款￥{{item.totalPrice}}</text>
							<text v-if="item.totalPrice==0&&item.totalIntegral!=0">实付款{{item.totalIntegral}}积分</text>
							<text
								v-if="item.totalPrice!=0&&item.totalIntegral!=0">实付款￥{{item.totalPrice}}+{{item.totalIntegral}}积分</text>
						</view>
						<view class="btnbox">
							<view class="btn" @click="goExpress(item.orderId)">查看物流</view>
							<view class="btn" @click="orderinfo(item.orderId)">订单详情</view>
							<view class="btn" @click="confirmReceipt(item.orderId)">确认收货</view>
							<!-- <view class="btn">帮我付</view> -->
							<!-- <view class="btn">立即付款</view> -->
						</view>
					</view>
					<view class="noimgbox" v-if="list2.length==0">
						<image src="../../static/noimg/nonews.png" class="noimg"></image>
					</view>
					<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-else/>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y="true" class="swiper-item scroll-view" @scrolltolower="getlist">
					<view class="orderitem" v-for="(item,index) in list3" :key="index">
						<view class="titie">
							<view class="dpname">{{item.shopName}}</view>
							<view class="zt">单号:{{item.expressNo}}</view>
						</view>
						<view class="goodsitem" v-for="(it,i) in item.orderGoodsList" @click="top(it.goodsId)">
							<view class="gimg">
								<image :src="it.imageUrl" mode="aspectFill"></image>
							</view>
							<view class="g_t_b">
								<view class="g_nam">{{it.goodsName}}</view>
								<view class="g_pz">规格：{{it.goodsAttr | text}}</view>
							</view>
							<view class="g_p">
								<view v-if="it.totalPrice!=0&&it.totalIntegral==0" class="g_price">￥{{it.totalPrice}}
								</view>
								<view v-if="it.totalPrice==0&&it.totalIntegral!=0" class="g_price">
									{{it.totalIntegral}}积分</view>
								<view v-if="it.totalPrice!=0&&it.totalIntegral!=0" class="g_price">￥{{it.totalPrice}}
								</view>
								<view v-if="it.totalPrice!=0&&it.totalIntegral!=0" class="g_price">
									{{it.totalIntegral}}积分</view>
								<view class="g_num">x{{it.totalNum}}</view>
							</view>
						</view>
						<view class="t_price">
							<text v-if="item.totalPrice!=0&&item.totalIntegral==0">实付款￥{{item.totalPrice}}</text>
							<text v-if="item.totalPrice==0&&item.totalIntegral!=0">实付款{{item.totalIntegral}}积分</text>
							<text
								v-if="item.totalPrice!=0&&item.totalIntegral!=0">实付款￥{{item.totalPrice}}+{{item.totalIntegral}}积分</text>
						</view>
						<view class="btnbox">
							<view class="btn" @click="goExpress(item.orderId)">查看物流</view>
							<view class="btn" @click="orderinfo(item.orderId)">订单详情</view>
							<view class="btn" @click="goEvaluate(item.orderId)">立即评价</view>
							<!-- <view class="btn">帮我付</view> -->
							<!-- <view class="btn">立即付款</view> -->
						</view>
					</view>
					<view class="noimgbox" v-if="list3.length==0">
						<image src="../../static/noimg/nonews.png" class="noimg"></image>
					</view>
					<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-else/>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y="true" class="swiper-item scroll-view " @scrolltolower="getlist">
					<view class="orderitem" v-for="(item,index) in list4" :key="index">
						<view class="titie">
							<view class="dpname">{{item.shopName}}</view>
							<view class="zt">单号:{{item.expressNo}}</view>
						</view>
						<view class="goodsitem" v-for="(it,i) in item.orderGoodsList" @click="top(it.goodsId)">
							<view class="gimg">
								<image :src="it.imageUrl" mode="aspectFill"></image>
							</view>
							<view class="g_t_b">
								<view class="g_nam">{{it.goodsName}}</view>
								<view class="g_pz">规格：{{it.goodsAttr | text}}</view>
							</view>
							<view class="g_p">
								<view v-if="it.totalPrice!=0&&it.totalIntegral==0" class="g_price">￥{{it.totalPrice}}
								</view>
								<view v-if="it.totalPrice==0&&it.totalIntegral!=0" class="g_price">
									{{it.totalIntegral}}积分</view>
								<view v-if="it.totalPrice!=0&&it.totalIntegral!=0" class="g_price">￥{{it.totalPrice}}
								</view>
								<view v-if="it.totalPrice!=0&&it.totalIntegral!=0" class="g_price">
									{{it.totalIntegral}}积分</view>
								<view class="g_num">x{{it.totalNum}}</view>
							</view>
						</view>
						<view class="t_price">
							<text v-if="item.totalPrice!=0&&item.totalIntegral==0">实付款￥{{item.totalPrice}}</text>
							<text v-if="item.totalPrice==0&&item.totalIntegral!=0">实付款{{item.totalIntegral}}积分</text>
							<text
								v-if="item.totalPrice!=0&&item.totalIntegral!=0">实付款￥{{item.totalPrice}}+{{item.totalIntegral}}积分</text>
						</view>
						<view class="btnbox">
							<view class="btn" @click="orderinfo(item.orderId)">订单详情</view>
							<!-- <view class="btn">帮我付</view> -->
							<!-- <view class="btn">立即付款</view> -->
						</view>
					</view>
					<view class="noimgbox" v-if="list4.length==0">
						<image src="../../static/noimg/nonews.png" class="noimg"></image>
					</view>
					<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-else/>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		orderlist,cancelOrder,confirmReceipt
	} from "../../api/product.js"
	export default {
		data() {
			return {
				current:null,
				num0: 1,
				num1: 1,
				num2: 1,
				num3: 1,
				num4: 1,
				list0: [],
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		filters: {
			ordertext(val) {
				console.log(val)
				let arr = ["待支付", "待发货", "待收货", "待评价", "已完成", "已取消"]
				for (let i = 0; i < arr.length; i++) {
					if (val == i) {
						return arr[i]
					}
				}
			},
			text(val) {
				let s = val.replace(/\"/g, "")
				let ss = s.replace(/\[/g, "")
				let sss = ss.replace(/\]/g, "")
				return sss
			}
		},
		onLoad(e) {
			if (e.index) {
				this.current = e.index
			}
		},
		watch: {
			current: {
				handler(n, o) {
					if (n != o&&o!=null) {
						if (this["list" + n].length == 0) {
							this.getlist()
						}
					}
				},
				deep: true
			}
		},
		onShow() {
			this.num0 = 1
			this.num1 = 1
			this.num2 = 1
			this.num3 = 1
			this.list0 = []
			this.list1 = []
			this.list2 = []
			this.list3 = []
			this.getlist()
		},
		methods: {
			goEvaluate(item){
				uni.navigateTo({
					url:"../evaluate/evaluate?orderId="+item
				})
			},
			// 查看物流
			goExpress(item){
				uni.navigateTo({
					url:"../express/express?orderId="+item
				})
			},
			// 确认收货
			confirmReceipt(item){
				this.showMd("是否确认收货",()=>{
					this.get(confirmReceipt,{orderId:item}).then(res=>{
						this.num0 = 1
						this.num1 = 1
						this.num2 = 1
						this.num3 = 1
						this.list0 = []
						this.list1 = []
						this.list2 = []
						this.list3 = []
						this.getlist()
					})
				})
			},
			// 取消订单
			cancel(item){
				this.showMd("是否取消订单",()=>{
					this.get(cancelOrder,{orderId:item}).then(res=>{
						console.log(res)
						this.num0 = 1
						this.num1 = 1
						this.num2 = 1
						this.num3 = 1
						this.list0 = []
						this.list1 = []
						this.list2 = []
						this.list3 = []
						this.getlist()
					})
				})
			},
			change(e) {
				this.current = e
			},
			changeindex(e) {
				this.current = e.detail.current
			},
			async getlist() {
				uni.showLoading({
				    title: '加载中'
				});
				let res = await this.get(orderlist, {
					orderStatus: this.current,
					pageSize: 10,
					pageNum: this['num' + this.current]
				})
				if (res.data.orderList.length > 0){
					this["num" + this.current]++
					this["list" + this.current] = [...this["list" + this.current], ...res.data.orderList]
				}
			},
			// 订单详情
			orderinfo(id) {
				uni.navigateTo({
					url: "./orderinfo?orderid=" + id
				})
			},
			// 立即支付
			topay(id) {
				uni.navigateTo({
					url: "./pay?orderid=" + id
				})
			},
			back() {
				uni.switchTab({
					url:"/pages/user/user"
				})
			},
			top(id){
				uni.navigateTo({
					url:"/pages/product/product?id="+id
				})
			}
		}
	}
</script>

<style>
	.noimgbox {
		width: 750rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.noimg {
		width: 226rpx;
		height: 269rpx;
	}

	.scroll-view {
		padding-bottom: 30rpx;
		box-sizing: border-box;
	}

	.btn {
		height: 50rpx;
		background: #FFFFFF;
		border: 1px solid #F09238;
		opacity: 1;
		border-radius: 30rpx;
		padding: 0 20rpx;
		line-height: 50rpx;
		margin-left: 10rpx;
		font-size: 26rpx;
		color: #F09238;
	}

	.btnbox {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 30rpx;
	}

	.t_price {
		font-size: 32rpx;
		font-family: .PingFang SC;
		font-weight: 400;
		line-height: 32rpx;
		color: #333333;
		opacity: 1;
		text-align: right;
		margin-top: 40rpx;
	}

	.g_price {
		height: 40rpx;
		font-size: 30rpx;
		font-family: .PingFang SC;
		font-weight: 400;
		color: #333333;
		opacity: 1;
	}

	.g_num {
		height: 40rpx;
		font-size: 30rpx;
		font-family: .PingFang SC;
		font-weight: 400;
		color: #666;
		opacity: 1;
	}

	.g_p {
		text-align: right;
		width: 170rpx;
	}

	.g_pz {
		height: 33px;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 300;
		line-height: 33rpx;
		color: #999999;
		opacity: 1;
		margin-top: 20rpx;
	}

	.g_nam {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 37rpx;
		color: #333333;
		opacity: 1;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 3;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */
	}

	.g_t_b {
		margin-left: 20rpx;
		height: 164rpx;
		width: 300rpx;
	}

	.gimg {
		width: 154rpx;
		height: 154rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.gimg>image {
		width: 154rpx;
		height: 154rpx;
	}

	.goodsitem {
		height: 164rpx;
		display: flex;
		margin-top: 30rpx;
	}

	.zt {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #F09238;
		opacity: 1;
	}

	.titie {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
	}

	.orderitem {
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		/* margin-top: 30rpx; */
		margin-bottom: 30rpx;
		padding: 20rpx 30rpx;
	}

	.swiper-item {
		height: 100%;
	}

	swiper {
		/* #ifdef H5 */
		height: calc(100vh - 168rpx);
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh - 80rpx);
		/* #endif */
	}

	.t_t {
		margin: 0 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		line-height: 50rpx;
	}

	.active {
		color: #333333;
		border-bottom: 2rpx #EC5F2A solid;
	}

	.input {
		width: 604rpx;
		height: 64rpx;
		background: #E0E0E0;
		opacity: 1;
		border-radius: 32rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
	}

	.navtitle {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav_title {
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.con {
		background-color: #F6F6F6;
		/* min-height: 100vh; */
	}
</style>
